<template>
    <div>
      <el-form ref="form" :model="form" label-width="100px">
         <el-form-item label="上传设备照片">
              <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <div v-else class="noImg"><i class="el-icon-plus avatar-uploader-icon"></i></div>
                  <input type="text" hidden='true' :value="imageUrl" />
              </el-upload>
          </el-form-item>
          <el-row>
            <el-col :span="6">
              <el-form-item label="设备名称">
                <el-input v-model="form.name" :fetch-suggestions='querySearch'
                @select='handleSelect'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="型号">
                <el-select v-model="form.size" placeholder="请选择型号" style="width:100%">
                <el-option label="型号1" value="型号1"></el-option>
                <el-option label="型号12" value="型号12"></el-option>
                <el-option label="型号13" value="型号13"></el-option>
                </el-select>
            </el-form-item>
            </el-col>
          </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="生产厂家">
                <el-select v-model="form.vender" placeholder="请选择厂家" style="width:100%">
                  <el-option label="厂家 A" value="厂家 A"></el-option>
                  <el-option label="厂家 2" value="厂家 2"></el-option>
                  <el-option label="厂家 3" value="厂家 3"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商">
                <el-select v-model="form.vender" placeholder="请选择供应商" style="width:100%">
                  <el-option label="供应商 A" value="供应商 A"></el-option>
                  <el-option label="供应商 2" value="供应商 2"></el-option>
                  <el-option label="供应商 3" value="供应商 3"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="安装时间">
                <el-date-picker
                  v-model="form.aztime"
                  type="date"
                  placeholder="选择日期"  style="width:100%">
                </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安装单位" label-width="100px">
              <el-input v-model="form.az" placeholder="请输入安装单位"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="安装人员" label-width="100px">
              <el-input v-model="form.azname" placeholder="请输入安装人员"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        <el-col :span="6">
          <el-form-item label="报废时间">
              <el-date-picker
                v-model="form.scraptime"
                type="date"
                placeholder="选择日期" style="width:100%">
              </el-date-picker>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="报废原因" >
                <el-input type="textarea" v-model="form.scrapreson"></el-input>
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
          <el-form-item label="转让时间">
              <el-date-picker
                v-model="form.transfertime"
                type="date"
                placeholder="选择日期" style="width:100%">
              </el-date-picker>
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="转让原因">
              <el-input type="textarea" v-model="form.transferreson"></el-input>
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
          <el-form-item label="存放位置" >
              <el-cascader
                  :options="options"
                  v-model="form.posi"
                  @change="handleChange" style="width:100%">
              </el-cascader>
          </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="存储设备">
              <el-select v-model="form.save" placeholder="请选择是否存储设备" style="width:100%">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
              <span class="save_text" v-if="form.save=='是'" @click="dialogVisible = true">点击编辑存储设备</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
          <el-form-item label="保管员">
            <el-select v-model="form.keeper" placeholder="请选择保管员" style="width:100%">
              <el-option label="保管员 A" value="保管员 A"></el-option>
              <el-option label="保管员 2" value="保管员 2"></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否启用">
              <el-select v-model="form.use" placeholder="请选择是否启用" style="width:100%">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
              <el-form-item label="设备状态">
                <el-select v-model="form.state" placeholder="请选择设备状态" style="width:100%">
                  <el-option label="正常" value="正常"></el-option>
                  <el-option label="维修中" value="维修中"></el-option>
                  <el-option label="库存备用" value="库存备用"></el-option>
                  <el-option label="报废" value="报废"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>
          <el-form-item label="设备记录">
            <el-tabs @tab-click="handleClick">
              <el-tab-pane label="使用记录" name="first">使用记录</el-tab-pane>
              <el-tab-pane label="维修记录" name="second">维修记录</el-tab-pane>
              <el-tab-pane label="保养记录" name="third">保养记录</el-tab-pane>
            </el-tabs>
          </el-form-item>
      </el-form>
      <!-- 存储设备 -->
      <div class="dialog_box" v-if="dialogVisible">
        <el-main class="dialog_inner">
          <el-row class="dia_cont">
            <el-col class="item_1" :span="8">
              <div @click="chooseOne(index)" v-for="(item, index) in setting" :key="index">
                <el-card :class="{'box-card':true, mb10: true, sel: c_0==index}">
                  <div slot="header" class="clearfix">
                    <div><span class="fs12">名称:</span><span>{{item.name}}</span></div>
                    <div><span class="fs12">编号:</span><span>{{item.num}}</span></div>
                  </div>
                  <div class="text item">
                    {{item.content}}
                  </div>
                </el-card>
              </div>
              <el-row class="addbtn d2-text-center">
                <div @click="addOne()"><el-col :span="24"><i class="el-icon-plus"></i></el-col></div>
              </el-row>
            </el-col>
            <el-col class="item_1" :span="8">
              <div @click="chooseTwo(index)" v-for="(item, index) in chooseArray1" :key="index">
                <el-card :class="{'box-card':true, mb10: true, sel: c_1==index}">
                  <div slot="header" class="clearfix">
                    <div><span class="fs12">名称:</span><span>{{item.name}}</span></div>
                    <div><span class="fs12">编号:</span><span>{{item.num}}</span></div>
                  </div>
                  <div class="text item">
                    {{item.content}}
                  </div>
                </el-card>
              </div>
              <el-row class="addbtn d2-text-center">
                <div @click="addTwo()"><el-col :span="24"><i class="el-icon-plus"></i></el-col></div>
              </el-row>
            </el-col>
            <el-col class="item_1" :span="8">
              <div @click="chooseThree(index)" v-for="(item, index) in chooseArray2" :key="index">
                <el-card :class="{'box-card':true, mb10: true, sel: c_2==index}">
                  <div slot="header" class="clearfix">
                    <div><span class="fs12">名称:</span><span>{{item.name}}</span></div>
                    <div><span class="fs12">编号:</span><span>{{item.num}}</span></div>
                  </div>
                  <div class="text item">
                    {{item.content}}
                  </div>
                </el-card>
              </div>
              <el-row class="addbtn d2-text-center">
                <div @click="addThree()"><el-col :span="24"><i class="el-icon-plus"></i></el-col></div>
              </el-row>
            </el-col>
          </el-row>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-main>
      </div>
      <!-- 新增数据弹框 -->
      <el-dialog title="添加设备维护" :visible.sync="dialogFormVisible">
        <el-form :model="forms">
          <el-form-item label="名称">
            <el-input v-model="forms.name"></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input v-model="forms.num"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureDiaForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
export default {
  props: ['form'],
  components: {
  },
  data () {
    return {
      activeName: 'second',
      dialogVisible: false,
      dialogFormVisible: false,
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            },
            {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }]
        }
      ],
      selectedOptions: [],
      imageUrl: '',
      chooseArray1: [],
      chooseArray2: [],
      i0: false,
      i1: false,
      i2: false,
      c_0: null,
      c_1: null,
      c_2: null,
      setting: [
        { id: 0,
          name: '一号桶',
          num: '001',
          content: '随便写点',
          children: [
            { id: '01',
              name: '一层',
              num: '0010',
              content: '随便写点',
              children: [
                { id: '001', name: '第一格', num: '00100', content: '随便写点' }
              ]
            }
          ]
        }
      ],
      forms: {
        name: '',
        num: '',
        children: []
      }
    }
  },
  methods: {
    chooseOne (i) {
      console.log(i)
      this.c_0 = i
      this.c_1 = null
      this.chooseArray1 = this.setting[i].children
      this.chooseArray2 = []
    },
    chooseTwo (i) {
      this.c_1 = i
      this.c_2 = null
      this.chooseArray2 = this.setting[this.c_0].children[i].children
    },
    chooseThree (i) {
      this.c_2 = i
    },
    addOne () {
      this.dialogFormVisible = true
      this.i0 = true
      this.i1 = false
      this.i2 = false
    },
    addTwo () {
      this.i0 = false
      this.i1 = true
      this.i2 = false
      this.dialogFormVisible = true
    },
    addThree () {
      this.i0 = false
      this.i1 = false
      this.i2 = true
      this.dialogFormVisible = true
    },
    sureDiaForm () {
      let i0 = this.i0
      let i1 = this.i1
      let i2 = this.i2
      if (i0 === true) {
        this.setting.push(this.forms)
      } else if (i1 === true) {
        this.setting[this.c_0].children.push(this.forms)
        console.log(this.c_1)
      } else if (i2 === true) {
        this.setting[this.c_0].children[this.c_1].children.push(this.forms)
      }
      this.dialogFormVisible = false
      this.forms = {
        name: '',
        num: '',
        children: []
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      console.log(file.type)
      const isJPG = file.type === 'image/jpeg' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    handleSelect (item) {
      console.log(item)
    },
    handleChange (value) {
      console.log(value)
    }
  }
}
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 90px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 90px;
    height: 120px;
    display: block;
  }
  .avatar ,.noImg{border: 1px solid #eee;}
  .dialog_cont{height: 80%;overflow-y: scroll;}
  ::-webkit-scrollbar {
      display: none;
  }
.dialog_box{width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);position: fixed;top: 0;left: 0;z-index: 9}
.dialog_inner{width: 80%;height: 70vh;background: #fff;left:50%;top: 50%;transform: translate(-50%,-50%);position: relative; }
.dia_cont{height: 90%;font-size: 16px;border: 1px solid #888;margin-bottom: 15px;}
.item_1{height: 100%;overflow-y: scroll;border-right: 1px solid #888;padding: 10px;font-size: 15px;}
.item_1:last-child{border-right: none;font-size: 14px;}
.item_1:first-child{font-size: 16px;}
.first{padding: 10px;margin: 10px;border: 1px solid #eee}
.save_text{font-size: 14px;margin-left: 20px;}
.fs12{font-size: 12px;}
.addbtn{padding: 10px 0;border: 1px dashed #888;font-size: 28px;}
.mb10{margin-bottom: 10px;}
.sel{border: 1px solid #66b1ff}
</style>
